import React, { useState, useRef, useCallback } from 'react';
import { NarrowPane, MagnifyPane, Settings } from '../DesignerComponent';

import cls from 'classnames';

import Split from '@uiw/react-split';

import './index.less';
import { CanvasLayout } from '../DesignerComponent/CanvasLayout';
// import { DesignerContext } from '../DesignerHooks';
import { DesignerAPI } from '../type';

export const DesignerContent: React.FC<DesignerAPI.IDesignerContent> = ({
  nodeList,
}) => {
  const clsName = 'design';
  const canvasRef: any = useRef(null);

  // const context = useContext(DesignerContext)

  const [visible, setVisible] = useState(false);

  // const { nodeList } = useGetNodeList();

  const onDragging = useCallback(() => {
    let [composite]: any = document.getElementsByClassName(
      'design-body-composite',
    );

    let width = parseFloat(composite?.style?.width);

    if (width <= 6) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }, [visible]);

  return (
    <div className={cls(`${clsName}-content-body`)}>
      <Split onDragging={onDragging}>
        <div className={cls(`${clsName}-body-composite`)}>
          {/* <Composite isShowPane={onVisible} /> */}
          {visible ? (
            <NarrowPane nodeList={nodeList} />
          ) : (
            <div
              className={cls({
                [`${clsName}-pane-content`]: true,
              })}
            >
              <MagnifyPane nodeList={nodeList} />
            </div>
          )}
        </div>
        <div className={cls(`${clsName}-body-canvas`)}>
          <CanvasLayout id={'ivr-canvas'} ref={canvasRef} />
        </div>
      </Split>
      <div className={cls(`${clsName}-body-settings`)}>
        <Settings />
      </div>
    </div>
  );
};
